<template>
  <div class="button">
    <span><slot></slot></span>
    <p :class="{ on: value }" @click="change"><i></i></p>
  </div>
</template>

<script>
export default {
  props: ['value'],
  methods: {
    change () {
      this.$emit('change', !this.value)
    }
  }
}
</script>

<style lang="scss" scoped>
.button {
  display: flex;
  flex-direction: column;
  align-items: center;
}
span {
  line-height: 50px;
  text-align: center;
}
p {
  width: 120px;
  height: 50px;
  background: #666;
  border-radius: 4px;
  border: 5px solid #fff;
  box-shadow: 0 0 18px rgba($color: #000000, $alpha: 0.6);

  i {
    display: block;
    width: 0;
    height: 100%;
    background: tomato;
    position: relative;
    transition: width 0.2s ease-in-out;
    box-shadow: inset 0 0 5px rgba($color: #000000, $alpha: 0.8);

    &::after {
      content: '';
      position: absolute;
      width: 80px;
      height: 56px;
      background: #30a8ff;
      border-radius: 24px;
      top: -8px;
      right: -72px;
      box-shadow: 1px 1px 5px rgba($color: #000000, $alpha: 0.7);
    }
  }

  &.on i {
    width: 46px;
  }
}
</style>
